<template>
    <div class="content">
        <div class="public-tab">
            <a href="javascript:;" :class="defaultIndex==item.id?'flex-tab active':'flex-tab'" v-for="(item,key) of tabArr" @click="defaultIndex=item.id"
                :key="key">{{item.name|t}}</a>
        </div>
        <div class="form" v-show="defaultIndex==1">
            <zx-form-group :title="$t('MOBILE_LABEL')">
                <zx-input v-model="phoneForm.username" type="text" :place="$t('MOBILE_PLACE')" ref="username" :rules="rules.username">
                    <i class="phone-icon icon" slot="icon"></i>
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('PASSWORD')">
                <zx-input v-model="phoneForm.password" type="password" :place="$t('PASSWORD_PLACE')" ref="password" :rules="rules.password">
                    <i class="pass-icon icon" slot="icon"></i>
                </zx-input>
            </zx-form-group>
            <p class="text-r forget-pass" @click="$router.push('/forget')">{{'FORGET_PASS'|t}}</p>
            <zx-form-group>
                <input type="submit" class="submit-btn mt-20 green-btn radius" :value="$t('LOGIN_TITLE')" @click="submitFn('phoneForm')">
            </zx-form-group>
            <p class="text-c mt-10">or</p>
            <div class="form-group-button">
                <a href="javascript:;" class="submit-btn bg-gray mt-10 " @click="$router.push('/singup')">{{'SIGNUP_TITLE'|t}}</a>
            </div>
        </div>
        <div class="form" v-show="defaultIndex==2">
            <zx-form-group :title="$t('EMAIL_LBAEL')">
                <zx-input v-model="emailForm.email" type="text" :place="$t('EMAIL_PLACE')" ref="email" :rules="rules.email">
                    <i class="phone-icon icon" slot="icon"></i>
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('PASSWORD')">
                <zx-input v-model="emailForm.pass" type="password" :place="$t('PASSWORD_PLACE')" ref="pass" :rules="rules.password">
                    <i class="pass-icon icon" slot="icon"></i>
                </zx-input>
            </zx-form-group>
            <p class="text-r forget-pass" @click="$router.push('/forget')">{{'FORGET_PASS'|t}}</p>
            <zx-form-group>
                <input type="submit" class="submit-btn mt-20 green-btn radius" :value="$t('LOGIN_TITLE')" @click="submitFn('emailForm')">
            </zx-form-group>
            <p class="text-c mt-10">or</p>
            <div class="form-group-button">
                <a href="javascript:;" class="submit-btn bg-gray mt-10" @click="$router.push('/singup')">{{'SIGNUP_TITLE'|t}}</a>
            </div>
        </div>
    </div>
</template>
<script>
    import { UserInfo } from '@/services';
    import { Form, Func, Auth, Rules } from '@/providers';
    import jsonp from 'jsonp';

    export default {
        data() {
            return {
                defaultIndex: 1,
                ipAddress: '',
                name: '',
                tabArr: [
                    {
                        id: 1,
                        name: 'PHONE_LOGIN'
                    },
                    {
                        id: 2,
                        name: 'EMAIL_LOGIN'
                    }
                ],
                phoneForm: {
                    username: '',
                    password: ''
                },
                emailForm: {
                    email: '',
                    pass: ''
                },
                rules: Rules
            };
        },
        methods: {
            async submitFn(formName) {
                if (!Form.validataForm(this, formName)) {
                    return false;
                }
                let _parmas = this[formName];
                try {
                    let res = await UserInfo.Login({
                        username: formName == 'phoneForm' ? _parmas.username : _parmas.email,
                        password: Func.PasswordEncrypt(formName == 'phoneForm' ? _parmas.password : _parmas.pass),
                        ip: this.ipAddress
                    });
                    console.log(res);
                    this.$dialog.toast({
                        msg: res.desc,
                        position: 'top',
                        onOk: () => {
                            Auth.setItem('userId', res.data.loginUserInfo.user_no);
                            Auth.setItem('phone', res.data.loginUserInfo.phone);
                            Auth.setItem('email', res.data.loginUserInfo.mail);
                            Auth.setItem('alipay', res.data.loginUserInfo.alipay);
                            Auth.setItem('weixin', res.data.loginUserInfo.weixin);
                            Auth.setItem('token', res.data.token);
                            this.$router.push('/');
                        }
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            // 表单重置
            resetFrom(formName) {
                Form.resetFrom(this, formName);
            }
        },
        created() {
            jsonp('https://bird.ioliu.cn/ip', null, (err, data) => {
                if (err) {
                    this.ipAddress = '127.0.0.1';
                } else {
                    this.ipAddress = data.data.ip;
                }
            });
        }
    };
</script>
<style scoped lang="scss">
    @import "../assets/sass/login.scss";
</style>